/*
 * @Author: Wilbur
 * @Date: 2019-01-08 14:08:47
 * @Last Modified by: ice
 * @Last Modified time: 2019-01-16 17:19:29
 */

<template>
    <div class="container member-list-container">
        <div class="content-wrapper">
            <el-row
                class="search-wrapper"
                :gutter="20">
                <el-form
                    label-position="left"
                    label-width="84px"
                    size="small">
                    <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="选择赞助">
                            <el-select
                                v-model="filterData.bid_no"
                                @change="fnChangeBid"
                                placeholder="请选择">
                                <el-option
                                    :label="item.title"
                                    v-for="(item, index) in bidSimpleList"
                                    :key="index"
                                    :value="item.bid_no">{{ item.title }}</el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col
                        class="filter-item"
                        :md="{ span: 24 }"
                        :sm="{ span: 24}">
                        <el-form-item label="省份">
                            <div>
                                <el-radio-group
                                    disabled
                                    v-model="filterData.area_limit">
                                    <el-radio :label="0">全国</el-radio>
                                    <el-radio :label="1">其他省份</el-radio>
                                </el-radio-group>
                            </div>
                            <el-checkbox-group
                                class="provence-list"
                                @change="fnChangeTypeList"
                                v-model="filterData.province_list">
                                <el-checkbox
                                    class="provence-checkbox"
                                    :label="item.id"
                                    v-for="(item, index) in provence"
                                    :value="item.id"
                                    :key="index">{{ item.name }}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="filter-item"
                        :md="{ span: 24 }"
                        :sm="{ span: 24}">
                        <el-form-item label="资源筛选">
                            <el-checkbox-group
                                @change="fnChangeTypeList"
                                v-model="filterData.type_list">
                                <el-checkbox
                                    :label="item.type_no"
                                    class="resource-checkbox"
                                    v-for="(item, index) in typeList"
                                    :value="item.type_no"
                                    :key="index">{{ item.type_name }}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <div class="table-wrapper">
                <el-table
                    v-loading="loading"
                    :data="tableData"
                    height="100%"
                    @sort-change="handleSortChanged"
                    @selection-change="handleSelectionChange"
                    style="width: 100%;">
                    <el-table-column
                        type="selection"
                        width="40" />
                    <el-table-column
                        fixed="left"
                        header-align="left"
                        :width="50"
                        label="序号">
                        <template slot-scope="scope">
                            <div class="table-index">
                                {{ scope.$index + 1 }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed="left"
                        :formatter="emptyFormatter"
                        prop="nickname"
                        min-width="110"
                        label="微信昵称" />
                    <el-table-column
                        fixed="left"
                        :formatter="emptyFormatter"
                        prop="phone"
                        min-width="110"
                        label="手机号" />

                    <el-table-column
                        prop="school[0].name"
                        :formatter="emptyFormatter"
                        :width="150"
                        show-overflow-tooltip
                        label="地区">
                        <template slot-scope="scope">
                            <template>{{ fnComputed(scope.row.province_list, 'name') }}</template>
                        </template>
                    </el-table-column>

                    <el-table-column
                        label="资源数量">
                        <template slot-scope="scope">
                            {{ scope.row.resource_list.length }}
                        </template>
                    </el-table-column>

                    <el-table-column
                        :formatter="emptyFormatter"
                        show-overflow-tooltip
                        :width="150"
                        label="资源展示">
                        <template slot-scope="scope">
                            <template>{{ fnComputed(scope.row.resource_list, 'resource_title') }}</template>
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="bid_success_count"
                        :min-width="114"
                        sortable="custom"
                        label="中标次数" />
                </el-table>
            </div>
            <div class="pagination-wrapper clearfix">
                <el-button
                    size="mini"
                    :disabled="selectedList.length == 0 ? true : false"
                    @click="fnMassSendMsg">群发</el-button>
                <span class="tips">给选中的用户群发模板消息</span>
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData" />
            </div>
        </div>
    </div>
</template>

<script>
let sortFieldMap = {
    bid_success_count: 'bid_success_count'
};

let sortTypeMap = {
    'ascending': 'asc',
    'descending': 'desc'
};

import regin from '@/assets/js/regin.min.js';
export default {
    data() {
        return {
            sortData: {
                field: 0,
                by: 1
            },
            checkList: [],
            authResult: {},
            tableData: [],
            filterData: {
                bid_no: '',
                province_list: [],
                area_limit: 0,
                type_list: []
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            transformIds: [],
            bid_no: '',
            selectedList: [],
            dataTypeList: [],
            bidSimpleList: [],
            provence: [],
            typeList: [],
            lastQueryTime: 0,
            loading: false,
        };
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.filterData.bid_no = this.$route.query.bid_no ? this.$route.query.bid_no : '';
        this.$store.commit('SET_HEADER', [
            {
                title: "广告系统",
            },
            {
                title: "赞助列表"
            },
            {
                title: '微信群发'
            }
        ]);

        this.fnGetBidSimpleList();
    },
    methods: {
        fnComputedData(no) {
            let result = {
                area_limit: 0
            };

            for(let i = 0; i < this.bidSimpleList.length; i++) {
                if(this.bidSimpleList[i].bid_no == no) {
                    result = this.bidSimpleList[i];
                }
            }
            return result;
        },
        fnChangeBid() {
            this.fnInitProvince();
            this.fnInitTypeList();
            this.getTableData();
        },
        fnInitTypeList() {
            let type = [];

            for(let i = 0; i < this.dataTypeList.length; i++) {
                if(this.fnComputedData(this.filterData.bid_no).limit_resource_type_nos.indexOf(this.dataTypeList[i].type_no) != -1) {
                    type.push({
                        type_no: this.dataTypeList[i].type_no,
                        type_name: this.dataTypeList[i].type_name
                    });
                }
            }
            this.filterData.type_list = this.fnComputedData(this.filterData.bid_no).limit_resource_type_nos;
            this.typeList = type;
        },
        fnInitProvince() {
            let provence = [];
            let temp = [];

            for(let i = 0; i < regin.length; i++) {
                if(regin[i].id != 0) {
                    if(this.fnComputedData(this.filterData.bid_no).area_limit == 1) {
                        if(this.fnComputedData(this.filterData.bid_no).limit_pids.indexOf(regin[i].id) != -1) {
                            provence.push({
                                id: regin[i].id,
                                name: regin[i].name
                            });
                        }

                    }else{
                        provence.push({
                            id: regin[i].id,
                            name: regin[i].name
                        });

                        temp.push(regin[i].id);

                    }
                }
            }

            if(this.fnComputedData(this.filterData.bid_no).area_limit == 1) {
                this.filterData.province_list = this.fnComputedData(this.filterData.bid_no).limit_pids;
            }else{
                this.filterData.province_list = temp;
            }
            this.provence = provence;
            this.filterData.area_limit = this.fnComputedData(this.filterData.bid_no).area_limit;
        },
        fnGetBidSimpleList(page) {
            this.$post('/wei4/bid%5Cget_simple_list', {
                page_id: page || this.page.now_page
            }, resp => {
                if (resp.code == 1) {

                    this.bidSimpleList = resp.data.list;
                    // this.filterData.bid_no = resp.data.list[0].bid_no;

                    this.fnInitProvince();
                    this.fnGetTypeList(() => {
                        this.getTableData();
                    });
                }
            });
        },
        fnChangeTypeList() {
            this.getTableData();
        },
        fnMassSendMsg() {
            this.$post('/wei4/mass%5Csend', {
                bid_no: this.filterData.bid_no,
                supply_nos: this.selectedList.toString()
            }, resp => {
                if (resp.code == 1) {
                    this.getTableData(this.page.now_page);
                    this.$message({
                        type: 'success',
                        message: '发送成功'
                    });
                }else{
                    this.$message({
                        type: 'warning',
                        message: resp.msg
                    });
                }
            });
        },
        handleSelectionChange(val) {

            this.selectedList = [];
            for(let i = 0; i < val.length; i++) {
                this.selectedList.push(val[i].supply_no);
            }
        },
        /**
         * 排序
         */
        handleSortChanged(data) {
            if (data.order) {
                console.log(data);
                this.sortData.field = sortFieldMap[data.prop];
                this.sortData.by = sortTypeMap[data.order];
            } else {
                this.sortData.field = 0;
                this.sortData.by = 1;
            }

            this.getTableData();
        },
        fnComputed(list, key) {
            let name = '';

            if(list) {
                for(let i = 0; i < list.length; i++) {
                    if(name) {
                        name += '/';
                    }
                    name += list[i][key];
                }
            }else{
                name = '--';
            }
            return name;

        },
        /**
         * 获取表格数据
         */
        getTableData(page) {
            let timeTmp = new Date().getTime();

            this.lastQueryTime = timeTmp;

            this.loading = true;
            this.$post('/wei4/mass%5Cget_list', {
                bid_no: this.filterData.bid_no,
                page: page || this.page.now_page,
                province_ids: this.filterData.province_list.toString(),
                type_nos: this.filterData.type_list.toString(),
                sort_field: this.sortData.field,
                sort_type: this.sortData.by
            }, resp => {
                if(timeTmp != this.lastQueryTime){
                    return ;
                }
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page = resp.data.page;
                }else{
                    this.$message({
                        type: 'warning',
                        center: true,
                        message: resp.msg
                    });
                }
                this.loading = false;
            });
        },
        fnGetTypeList(callback) {

            this.$post('/wei4/resource_type%5Cget_simple_list', {}, resp => {
                if (resp.code == 1) {
                    this.dataTypeList = resp.data.list;
                    this.fnInitTypeList();
                    // console.log(this.dataTypeList);
                    if(callback){
                        callback();
                    }
                }
            });
        },
        /**
         * 列表渲染辅助函数：列表项为空处理
         */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },
    }
};
</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow: hidden;
}
.search-wrapper {
    padding: 15px;
    background-color: #fff;
}
.filter-item {
    margin-bottom: 15px;
    .el-form-item {
        margin-bottom: 0;
    }
    .el-autocomplete {
        width: 100%;
    }
}

.table-wrapper {
    flex: 1;
    background-color: #fff;
    overflow: hidden;
    .el-button {
        padding: 0;
    }

    .btn-delete {
        color: #fd4d32;
        &.is-disabled {
            color: #c0c4cc;
            cursor: not-allowed;
        }
    }
}
.pagination-wrapper {
    padding-top: 10px;
    .tips{
        color: #606266;
        font-size: 12px;
    }
    .el-pagination {
        float: right;
        padding: 0;
        background-color: transparent;
    }
}
</style>
<style lang="less">
.provence-list{
    .el-checkbox {
        margin-left: 0!important;
        margin-right: 30px;
    }
    // .provence-checkbox{
    //     display: none;
    //     &.is-checked{
    //         display: inline-block;
    //     }
    // }
}
.resource-checkbox{
    &.el-checkbox {
        margin-left: 0!important;
        margin-right: 30px;
    }
    // display: none;
    // &.is-checked{
    //     display: inline-block;
    // }
}
</style>
